<template>
	<view class="page-view">

		<view class="top">
			<u-navbar :title="stepList[step]&&stepList[step].title ||  orderDetail.status_name" :background="{
					backgroundColor: 'transparent'
				}" :border-bottom="false" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>

			<view class="tips-box" v-if="step==2 && orderDetail.order_info">
				还剩<u-count-down bg-color="transparent" color="#ffffff" separator-color="#ffffff" separator-size="24"
					font-size="24" :timestamp="orderDetail.order_info.out_time" :show-days="false"></u-count-down>订单自动取消
			</view>

			<view class="tips-box" v-if="orderDetail.status==4">
				还剩<u-count-down bg-color="transparent" color="#ffffff" separator-color="#ffffff" separator-size="24"
					font-size="24" :timestamp="orderDetail.auto_finish" :show-days="false"></u-count-down>订单自动确认完成
			</view>

			<view class="tips-box" v-if="orderDetail.status==-6">
				已拒绝退款，请联系平台客服
			</view>
			<view class="steps-box" v-if="step>=0">
				<u-steps :list="stepList" :current="step" :active-color="config.mainColor"></u-steps>
			</view>
			<view class="steps-box" v-if="orderDetail.status<0">
				<view class="u-p-l-30 u-p-r-30 u-flex" @click="toRefund">
					<view class="u-flex-1">
						<view class="u-font-34 font-medium">取消/退款进度</view>
						<view class="u-tips-color">已申请退款，原因：{{orderDetail.order_info&&orderDetail.order_info.refund_reason ||'其他'}}
						</view>
					</view>
					<u-icon name="arrow-right" size="32" color="#999999"></u-icon>
				</view>
			</view>
		</view>

		<!-- 客户 -->
		<view class="page-content">
			<orderActionSub ref="orderSub" v-if="step==0" :serveId="pageId"></orderActionSub>
			<orderAwaitReceive v-if="step==1" :info="orderDetail" :role="role"></orderAwaitReceive>
			<orderActionPay v-if="step>=2&&step<=4 || orderDetail.status<=-4" :info="orderDetail" role="user">
			</orderActionPay>
			<orderActionComplete v-if="showSucess" :orderId="pageId" role="user" type="1" style="height:100%;">
			</orderActionComplete>


			<view class="u-m-l-30 u-m-r-30 u-m-b-30 radius20 bg-white"
				v-if="orderDetail.order_info&&orderDetail.order_info.order_id">
				<u-cell-group :border="false">
					<u-cell-item title="交易单号" :arrow="false" :value="orderDetail.order_info.order_id"></u-cell-item>
					<u-cell-item title="下单时间" :arrow="false" :value="orderDetail.order_info.add_time"></u-cell-item>
					<u-cell-item title="付款时间" :arrow="false" :value="orderDetail.order_info.pay_time"
						v-if="orderDetail.order_info.pay_time"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<!-- 用户 -->
		<view class="u-p-30 bottom-action" v-if="orderDetail.status>-4 || orderDetail.status<=-6 || step==0">
			<u-button type="primary" hover-class="none" shape="circle" v-if="step==0" @click="subOrderHandle">确定</u-button>
			<view class="u-flex ">
				<view class="u-flex-1 u-flex">
					<view class="phone-btn" @click="makePhone" v-if="step==3">
						<text class="iconfont icon-24gf-phoneLoudspeaker"></text>
					</view>
					<view class="phone-btn" @click="toChat" v-if="step==3">
						<text class="iconfont icon-Reply"></text>
					</view>
				</view>
				<u-button type="primary" hover-class="none" shape="circle" v-if="orderDetail.status==0" class="action-btn" plain
					:customStyle="{backgroundColor:'#ffffff !important'}" @click="cancelModal=true">取消预约</u-button>

				<u-button type="default" :customStyle="customBtnStyle" plain hover-class="none" shape="circle"
					v-if="orderDetail.status==1" class="action-btn" @click="cancelOrderModal=true">取消订单</u-button>

				<u-button type="primary" hover-class="none" shape="circle" v-if="orderDetail.status==1"
					@click="showPayType=true"
					class="action-btn">立即支付￥{{orderDetail.serve_info&&orderDetail.serve_info.price}}</u-button>

				<u-button type="default" :customStyle="customBtnStyle" plain hover-class="none" shape="circle" v-if="step==3"
					class="action-btn" @click="refundHandle">申请退款</u-button>

				<u-button type="primary" hover-class="none" shape="circle" v-if="orderDetail.status==2" class="action-btn"
					@click="codeModal=true">服务码</u-button>

				<u-button type="primary" hover-class="none" shape="circle" v-if="orderDetail.status==3" class="action-btn"
					@click="$u.toast('订单正在服务中，请等待把关师交付服务')">确认服务</u-button>

				<u-button type="primary" hover-class="none" shape="circle" v-if="orderDetail.status==4" class="action-btn"
					@click="showConfirmServe = true">确认服务</u-button>

				<u-button type="primary" hover-class="none" shape="circle" plain v-if="orderDetail.status==5" class="action-btn"
					:customStyle="{backgroundColor:'#ffffff !important'}"
					@click="toEvaluation">{{orderDetail.reply_info?'查看评价':'去评价'}}</u-button>

				<u-button type="default" :customStyle="customBtnStyle" plain hover-class="none" shape="circle"
					v-if="orderDetail.status<=-6" class="action-btn" @click="toServer">联系客服</u-button>
			</view>
		</view>
		<!-- 把关师 -->

		<!-- 支付弹窗 -->
		<bb-payment v-model="showPayType" :orderInfo="orderDetail.order_info" @complate="queryOrderDetail"></bb-payment>
		<!-- 提示弹窗 -->
		<u-modal v-model="cancelModal" @confirm="cancelHandle" ref="cancelModal" :async-close="true" content="确定要取消预约吗？"
			show-cancel-button :confirm-color="config.mainColor" z-index="9999"></u-modal>
		<u-modal v-model="cancelOrderModal" @confirm="cancelHandle" ref="cancelOrderModal" :async-close="true"
			content="确定要取消订单吗？" show-cancel-button :confirm-color="config.mainColor" z-index="9999"></u-modal>
		<u-modal v-model="codeModal" ref="cancelOrderModal" title="我的服务码" :confirm-color="config.mainColor" z-index="9999">
			<view class="u-font-40 font-bold align-center u-p-t-40 u-p-b-40">
				{{orderDetail.order_info&&orderDetail.order_info.meet_code}}
			</view>
		</u-modal>
		<u-modal v-model="showRefundModal" @confirm="confirmRefundHandle" ref="confirmModal" title="确定申请退款吗？"
			content="您的订单在服务中，不能全额退款。申请退款提交后，订单转售后，由平台介入审核处理。" show-cancel-button confirm-color="#FFAA44"
			z-index="9999"></u-modal>
		<!-- 选择退款原因 -->
		<u-popup v-model="showRefundReason" mode="bottom" border-radius="20" closeable>
			<view class="u-p-30">
				<view class="u-font-34 font-medium">选择拒绝原因</view>
				<u-cell-group :border="false">
					<u-cell-item :title="item" :arrow="false" v-for="(item,index) in reasons" :key="index"
						@click="selectIndex=index">
						<text class="iconfont" slot="right-icon"
							:class="[selectIndex==index?'icon-chenggong u-type-primary':'icon-yuanxingweixuanzhong']"></text>
					</u-cell-item>
				</u-cell-group>
				<view class="" style="padding: 30rpx 0 90rpx;">
					<u-button type="primary" hover-class="none" shape="circle"
						@click="requestRefund">申请退款￥{{orderDetail.serve_info&&orderDetail.serve_info.price}}</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 确认服务 -->
		<u-popup v-model="showConfirmServe" mode="bottom" border-radius="20" closeable>
			<view class="u-p-30">
				<view class="align-center u-m-b-40 u-font-32 font-medium">确认该把关服务已完成？</view>
				<view
					@click="$u.route('/pages/subpage/list/serv_detail',{id:orderDetail.serve_info&&orderDetail.serve_info.id})"
					class="order-view">
					<view class="u-flex-1 u-font-30 font-medium">
						{{orderDetail.serve_info&&orderDetail.serve_info.title}}
					</view>
					<view class="u-type-error">
						￥<text class="u-font-30">{{orderDetail.serve_info&&orderDetail.serve_info.price }}</text>
					</view>
				</view>
				<view class="" style="padding: 30rpx 0 90rpx;">
					<u-button type="primary" hover-class="none" shape="circle" @click="confirmServeHandle">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import orderActionSub from './components/order-action-sub.vue'
	import orderAwaitReceive from './components/order-await-receive.vue'
	import orderActionPay from './components/order-action-pay.vue'
	import orderActionComplete from './components/order-action-complete.vue'
	//  status 0:预约   1:待把关师接单  2:付款 3:见面 4:评价
	export default {
		components: {
			orderActionSub,
			orderAwaitReceive,
			orderActionPay,
			orderActionComplete
		},
		data() {
			return {
				config: this.$appConfig,
				stepList: [{
						name: '预约',
						title: '立即预约'
					},
					{
						name: '把关师接单',
						title: '等待把关师接单'
					}, {
						name: '付款',
						title: '待付款'
					}, {
						name: '见面',
						title: '服务中'
					}, {
						name: '评价',
						title: '已完成'
					},
				],
				reasons: ['时间不合适', '地址不合适', '服务内容与需求不符合', '其他原因'],
				selectIndex: 0,
				status: -2,
				customBtnStyle: {
					borderColor: "#cccccc",
					color: '#666666'
				},
				showPayType: false,
				cancelModal: false,
				confirmModal: false,
				showReason: false,
				cancelOrderModal: false,
				codeModal: false,
				overModal: false,
				showRefundReason: false,
				showPassCode: false,
				showConfirmServe: false,
				showRefundModal: false,
				pageId: '',
				step: -1,
				orderDetail: {},
				role: '',
				showSucess: false
			}
		},
		onShow() {
			uni.$off('selectLocation')
		},
		onLoad(e) {
			this.role = e.role
			this.pageId = e.id;
			if (e.type == 'order') {
				this.queryOrderDetail()
			} else {
				this.step = 0
			}
		},
		onPullDownRefresh() {
			if (this.step == 0) {
				uni.stopPullDownRefresh()
			} else {
				this.queryOrderDetail()
			}
		},
		methods: {
			// 订单成立 请求订单详情
			queryOrderDetail() {
				this.$u.api.orderDetail(this.pageId).then(res => {
					uni.stopPullDownRefresh()
					if (res.status < 0 && res.status >= -3) {
						this.$u.toast('订单已失效')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
						return;
					}
					if (res.status < 3) {
						this.step = res.status + 1
					} else if (res.status >= 3 && res.status < 5) {
						this.step = 3
					} else {
						this.step = 4
					}
					this.orderDetail = res;
				})
			},
			// 提交预约
			subOrderHandle() {
				const orderData = this.$refs.orderSub.getSubData()
				if (orderData) {
					this.$u.api.subOrderCreate(this.pageId, orderData).then(res => {
						this.$u.toast('预约申请已提交')
						setTimeout(() => {
							this.step = 1;
							this.pageId = res.id;
							this.queryOrderDetail()
						}, 1000)
					})
				}
			},
			// 取消预约 取消订单
			cancelHandle() {
				this.$u.api.subOrderCancel(this.orderDetail.id).then(res => {
					this.$u.toast('订单已取消')
					this.cancelModal = false;
					this.cancelOrderModal = false;
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			},
			// 联系把关师
			makePhone() {
				const phone = this.orderDetail.phone
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 退款
			refundHandle() {
				// this.showRefundReason = true;
				// 判断是否可退
				const payTime = new Date(this.orderDetail.order_info.pay_time).getTime()
				const now = Date.now()
				const leftTime = now - payTime
				if (leftTime < 48 * 60 * 60 * 1000) {
					this.$refs.uToast.show({
						title: '您好，订单已生成，48小时后才能申请退款，请耐心等待把关师服务',
						type: 'default',
						icon: false
					})
				} else {
					if (this.orderDetail.status >= 3) {
						this.showRefundModal = true
					} else {
						this.showRefundReason = true;
					}
				}
			},
			confirmRefundHandle() {
				this.showRefundReason()
			},
			requestRefund() {
				const refundSeason = this.reasons[this.selectIndex];
				this.$u.api.applyRefund(this.orderDetail.id, {
					reason: refundSeason
				}).then(res => {
					this.$u.toast('退款申请提交成功，请耐心等待1-3个工作日')
					setTimeout(() => {
						this.showRefundReason = false
						this.queryOrderDetail()
					}, 800)
				})

			},
			// 退款进度
			toRefund() {
				this.$u.route('/pages/subpage/order/refund', {
					id: this.orderDetail.order_info.id
				})
			},
			// 客户确认服务
			confirmServeHandle() {
				this.$u.api.orderFinish(this.pageId).then(res => {
					this.showConfirmServe = false
					this.$u.toast('确认成功，服务已完成')
					this.showSucess = true;
					setTimeout(() => {
						this.queryOrderDetail()
					}, 1000)
				})
			},
			toServer() {
				this.$u.route('/pages/subpage/about/service')
			},
			toEvaluation() {
				if (this.orderDetail.reply_info) {
					this.$u.route('/pages/subpage/order/comments', {
						id: this.pageId,
						role: 'user',
						type: 1
					})
				} else {
					this.$u.route('/pages/subpage/order/evaluate', {
						id: this.pageId,
						role: 'user',
						type: 1
					})
				}
			},
			toChat() {
				this.$u.route('/pages/subpage/message/chat', {
					uid: this.orderDetail.serve_info.uid,
					sid: this.orderDetail.serve_info.id,
					name: this.orderDetail.serve_info.name
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-view {
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.top {
			background-image: linear-gradient(169deg, $u-type-primary-light 0%, $u-type-primary 54%, $u-type-primary-light 100%);
			background-repeat: no-repeat;
			background-size: cover;
			position: sticky;
			top: 0;
			z-index: 99;
		}

		.steps-box {
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding-bottom: 35rpx;
			padding-top: 35rpx;
		}

		.bottom-action {
			position: fixed;
			width: 100%;
			bottom: 0;
			background-color: #fff;
			height: 180rpx;
			z-index: 99;
		}

		.action-btn {
			margin-left: 20rpx;
		}

		.page-content {
			padding-bottom: 180rpx;
			flex: 1;
			height: 0;
			position: relative;
		}

		.tips-box {
			height: 40rpx;
			color: #fff;
			text-align: center;
		}
	}

	.pay-types {
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 30rpx;
		border: 1px solid #eeeeee;
	}

	.pay-btn {
		padding: 30rpx 30rpx 60rpx;
	}

	.phone-btn {
		display: flex;
		width: 92rpx;
		height: 92rpx;
		border: 1rpx solid #D9D9D9;
		align-items: center;
		justify-content: center;
		color: $u-type-primary;
		font-size: 44rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.order-view {
		display: flex;
		padding: 28rpx;
		border-radius: 20rpx;
		background: #F6F6F6;

		&:before {
			content: "";
			display: inline-block;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #999;
			margin-right: 16rpx;
			margin-top: 16rpx;
		}
	}

	.tips-pane {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 40rpx;
	}
</style>